import { useEffect, useState } from "react";
import style from "./index.module.scss";
import image from "@/assets/images/index.png";
import Reward from "@/assets/images/award.jpg";
import Rule from "@/assets/images/rule.png";
import Icon1 from "@/assets/images/1.png";
import Icon2 from "@/assets/images/2.png";
import Icon3 from "@/assets/images/3.png";
import Zongzi from "@/assets/images/zongzi.png";
import classNames from "classnames";

console.log(process.env.REACT_APP_ENV);
const BaseUrl =
  process.env.REACT_APP_ENV === "prod"
    ? "https://webapi.pupupal.com"
    : "https://kk-test-webapi.sayhaiapp.com";
const Index = () => {
  const [showPage, setShowPage] = useState(0);
  const [data, setData] = useState([]);
  const [info, setInfo] = useState({});

  const handleScript = () => {
    // document.addEventListener('DOMContentLoaded', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const authorizationToken = urlParams.get("userId");
    console.log("authorizationToken", authorizationToken);

    if (authorizationToken) {
      fetch(`${BaseUrl}/gift/rank/duanwu`, {
        method: "GET",
        headers: {
          Authorization: authorizationToken,
        },
      })
        .then((response) => response.json())
        .then((response) => {
          if (response.code === 200 && response.data) {
            setData(response.data.duanWuGiftRankVO || []);
            setInfo(response.data.currentUserData[0]);
          } else {
            console.error("Failed to fetch ranking data:", response.msg);
          }
        })
        .catch((error) => console.error("Error fetching ranking data:", error));
    } else {
      console.error("Authorization token not found in URL");
    }
    // });
  };
  useEffect(() => {
    handleScript();
  }, []);
  return (
    <>
      {showPage === 0 && (
        <div className={style.container}>
          <img src={image} alt="背景图" />
          <div
            className={`${style.btn} ${style.btn1}`}
            onClick={() => {
              setShowPage(1);
            }}
          >
            {/* 奖励 */}
          </div>
          <div
            className={`${style.btn} ${style.btn2}`}
            onClick={() => {
              setShowPage(2);
            }}
          >
            {/* 规则 */}
          </div>

          <div className={style.content}>
            <div className={style.rank_box}>
              <p className={style.title}>收粽子</p>
              <div className={style.th_box}>
                <div className={style.th_rank}>排名</div>
                <div className={style.th_avatar}>昵称头像</div>
                <div className={style.th_score}>粽子情义值</div>
              </div>
              <div className={style.rank_list}>
                {data.map((item, i) => (
                  <div className={style.td_box} key={item?.userId}>
                    {i === 0 && (
                      <div className={style.rank}>
                        <img src={Icon1}></img>
                      </div>
                    )}
                    {i === 1 && (
                      <div className={style.rank}>
                        <img src={Icon2}></img>
                      </div>
                    )}
                    {i === 2 && (
                      <div className={style.rank}>
                        <img src={Icon3}></img>
                      </div>
                    )}
                    {i > 2 && (
                      <div className={style.rank}>
                        {i >= 99 ? "99+" : i + 1}
                      </div>
                    )}
                    <div className={style.user}>
                      <img src={item?.avatar} alt="" />
                      {item?.nickname}
                    </div>
                    <div className={style.score}>{item?.giftAllMoney}</div>
                  </div>
                ))}
              </div>
              <img className={style.image} src={Zongzi} alt="Zongzi" />
            </div>
          </div>

          <div className={style.user_box}>
            <div className={style.left}>
              <div className={style.my_rank_desc}>我的排名</div>
              <div className={style.my_rank_num}>
                {info?.giftAllMoney === 0 ? "未上榜" : info?.sortIndex}
              </div>
            </div>
            <div className={style.user}>
              <img src={info?.avatar} alt="" />
              {info?.nickname}
            </div>
            <div className={style.right}>
              <div className={style.my_rank_desc}>粽子情义值</div>
              <div className={style.my_rank_num}>{info?.giftAllMoney}</div>
            </div>
          </div>
        </div>
      )}
      {showPage === 1 && (
        <div className={classNames(style.questionWrap, style.questionWrap1)}>
          <img src={Reward} alt="图片" />
          <div className={style.btn_back} onClick={() => setShowPage(0)}>
            く
          </div>
        </div>
      )}
      {showPage === 2 && (
        <div className={style.questionWrap}>
          <img src={Rule} alt="图片" />
          <div className={style.btn_back} onClick={() => setShowPage(0)}></div>
        </div>
      )}
    </>
  );
};

export default Index;
